<template>
	<view class="user page-main">
		<view class="title">
			<router-link :underline="false" :to="{ path: '/pages/user/index' }"><span class="arrowLeft"></span></router-link>
			<span class="name">{{$t('myTeam.title')}}</span>
			<view>
				<span class="share" @click="showShare()"></span>
			</view>
		</view>
		<view class="userInfor">
			<dl>
				<dt>
					<img src="@/static/images/user/tx1.png" class="userImg">
				</dt>
				<dd>
					<view v-if="mining.nodeType=='1'">{{$t('myTeam.nodeType')}}</view>
					<view v-if="mining.nodeType=='2'">{{$t('myTeam.v2')}}</view>
					<view v-if="mining.nodeType=='3'">{{$t('myTeam.v3')}}</view>
					<view v-if="mining.nodeType=='4'">{{$t('myTeam.v4')}}</view>
					<br/>
					<span v-if="mining.nodeType=='1'">
						{{$t('myTeam.toNext1')}}{{10-mining.directDriveNum}}{{$t('myTeam.people1')}}
					</span>
					<span v-if="mining.nodeType=='2'">
						{{$t('myTeam.toNext2')}}{{31-mining.directDriveNum}}{{$t('myTeam.people2')}}
					</span>
					<span v-if="mining.nodeType=='3'">
						{{$t('myTeam.toNext3')}}{{121-mining.directDriveNum}}{{$t('myTeam.people3')}}
					</span>
				</dd>
				<!-- <dd>
					<view v-if="mining.nodeType=='1'">{{$t('myTeam.nodeType')}}</view>
					<view v-if="mining.nodeType=='2'">{{$t('myTeam.v2')}}</view>
					<view v-if="mining.nodeType=='3'">{{$t('myTeam.v3')}}</view>
					<view v-if="mining.nodeType=='4'">{{$t('myTeam.v4')}}</view>
					<span v-if="mining.nodeType=='1'">
						{{$t('myTeam.toNext1')}}{{10-mining.directDriveNum}}{{$t('myTeam.people1')}}
					</span>
					<span v-if="mining.nodeType=='2'">
						{{$t('myTeam.toNext2')}}{{51-mining.directDriveNum}}{{$t('myTeam.people2')}}
					</span>
					<span v-if="mining.nodeType=='3'">
						{{$t('myTeam.toNext3')}}{{151-mining.directDriveNum}}{{$t('myTeam.people3')}}
					</span>
				</dd> -->
				<!-- <dd>
					{{nodeType[mining.nodeType]}}<br/>
					<span v-if="mining.nodeType<4">
						{{$t('myTeam.toNext')}}{{mining.nodeType | getNodeTips(mining.directDriveNum)}}{{$t('myTeam.people')}}
					</span>
				</dd> -->
			</dl>
		</view>
		<view class="referralCode">
			<dl>
				<dt>{{mining.directDriveNum}}</dt>
				<dd>{{$t('myTeam.direct')}}</dd>
			</dl>
			<dl>
				<dt>{{nodeCount}}</dt>
				<dd>{{$t('myTeam.node')}}<el-tooltip placement="top-end"  effect="light">
				  <div slot="content">{{nodeTypeTip[mining.nodeType]}}</div>
				  <span class="question"></span>
				</el-tooltip></dd>
			</dl>
		</view>
		<view class="teamList">
			<view  class="unmannedTip" v-if="teamList.length==0">
				<span class="unmanned"></span>
				{{$t('myTeam.noDir')}}
			</view>
			<dl v-for="(item,index) in teamList">
				<dt><img src="@/static/images/team/teamtx.png" alt=""></dt>
				<dd>
					<strong class="f14">{{nameFormat(item.username)}}</strong>
					<!-- <span>{{millType[item.millType]}}</span> -->
					<span v-if="item.millType=='1'">{{$t('myTeam.mx')}}</span>
					<span v-if="item.millType=='2'">{{$t('myTeam.hx')}}</span>
					<span v-if="item.millType=='3'">{{$t('myTeam.jx')}}</span>
					<span v-if="item.millType=='4'">{{$t('myTeam.sx')}}</span>
					
				</dd>
				<dd>
					<strong v-if="item.millStatus==1">{{item.millHours}}h</strong>
					<strong v-else>0h</strong>
					<span class="teamIcon"></span>{{item.teamNum}}
				</dd>
			</dl>
		</view>
		
		<!-- share -->
		<view v-if="shareBoxDialogVisible">
			<el-dialog :visible.sync="shareBoxDialogVisible" width="100%" center class="shareBoxDialog">
				<div class="shareBox-H" id="sharebox" ref="sharebox" v-if="ZH">
					<span><view class="qrcode" id="qrCodeUrl" ref="qrCodeUrl"></view></span>
				</div>
				<div class="shareBox" id="sharebox" ref="sharebox" v-else>
					<span><view class="qrcode" id="qrCodeUrl" ref="qrCodeUrl"></view></span>
				</div>
				<span class="dialog-footer sharebox-btn">
					<el-button :class="ZH?'btn saveBtn':'btn saveBtnEN'" type="primary"  @click="saveImage">{{$t('index.saveImg')}}</el-button>
					<el-button :class="ZH?'btn link':'btn linkEN'" type="primary" v-clipboard:copy="shareUrl" v-clipboard:success="onCopy">{{$t('index.copyUrl')}}</el-button>
				</span>
			</el-dialog>
		</view>
	</view>
</template>

<script>
import authMixin from '@/mixins/auth'
import html2Canvas from 'html2canvas'
import { getToken } from '@/utils/auth'
import QRCode from 'qrcodejs2'
import cookie from 'js-cookie'
	export default {
		data() {
			return {
				currentPage: 0,
				pageSize: 30,
				loading: false,
				hasMoreData: true,
				teamList: [],
				total: 0,
				directCount: 0,
				nodeCount: 0,
				customerId: '',
				username: '',
				shareBoxDialogVisible: false,
				ZH:true,
				nodeType: {
				  1: this.$t('myTeam.nodeType'),
				  2: this.$t('myTeam.v2'),
				  3: this.$t('myTeam.v3'),
				  4: this.$t('myTeam.v4')
				},
				nodeTypeTip: {
				  1: this.$t('myTeam.v1'),
				  2: this.$t('myTeam.v2s'),
				  3: this.$t('myTeam.v3s'),
				  4: this.$t('myTeam.v4s')
				},
				millType: {
				  1: this.$t('myTeam.mx'),
				  2: this.$t('myTeam.hx'),
				  3: this.$t('myTeam.jx'),
				  4: this.$t('myTeam.sx')
				},
				user: {},
				mining:{}
			}
		},
		created() {
			this.getTeamList()
			let user = uni.getStorageSync('user')
			if (user != undefined && user != null && user != '') {
			  this.user = JSON.parse(user)
			}
		},
		onLoad(option) {
			this.customerId = option.customerId
			this.username = option.username
		},
		filters:{
			getNodeTips(nodeType, directCount) {
				let tips = ''
				if(nodeType == 1) {
					tips = `${10 - directCount}`
				}else if(nodeType == 2) {
					tips = `${31 - directCount}`
				}else if(nodeType == 3) {
					tips = `${121 - directCount}`
				}else {
					tips = ''
				}
				return tips
			}
			
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			async getTeamList() {
				// this.teamList = []
				// this.total = 0
				let params = {
					token: getToken(),
					customerId: this.customerId,
					username: this.username,
					page: this.currentPage,
					size: this.pageSize
				}
				//console.log(params)
				const {code, data} = await this.$api.register.getTeamInfo(params)
				if(code === '200') {
					if(data && data != null && data != 'undefined') {
						let teamData = JSON.parse(data)
						this.directCount = teamData.directCount
						this.nodeCount = teamData.nodeCount
						if(teamData.customerList && teamData.customerList.length > 0) {
							if(this.currentPage == 0) {
					 			this.teamList = teamData.customerList
								// this.total = 
							}else { 
								// let teamData = JSON.parse(data)
								teamData.customerList.forEach(item => {
									this.teamList.push(item)
									this.total += item.teamNum;
									this.$forceUpdate()
								})
							}
							this.currentPage++;
						} else {
							this.hasMoreData = false
						}
					}
				}
				this.loading = false
			},
			loadMore() {
				if (!this.loading && this.hasMoreData) {
					this.getTeamList();
				}else {
					uni.showToast({
						title: 'No More Data',
						icon: 'none'
					});
				}
			},
			// Mining Information
			miningInfo() {
			  let user = localStorage.getItem('user')
			  if (user != undefined && user != null && user != '') {
			    user = JSON.parse(user)
			    let params = {
			      token: getToken(),
			      customerId: user.customerId
			    }
			    this.$api.home
			      .miningInfo(params)
			      .then((res) => {
			        if (res.code == '200') {
			          let data = res.data != undefined ? JSON.parse(res.data) : res.data
			          this.mining = data;
					  this.$forceUpdate()
			          console.log(data)
			        }
			      })
			      .catch((error) => {})
			  }
			},
		  // Share QR code
		  async showShare() {
				let params = {
					token: getToken()
				}
				const res = await this.$api.home.getQRcode(params)
				if (res.code == '200') {
		          let datas = res.data
				  //this.shareImage=datas.accessPath
		          this.shareUrl = datas.shareUrl + '?invite=' + this.mining.inviterCode
		          this.shareBoxDialogVisible = true
		          this.$nextTick(() => {
		            this.creatQrCode()
		          })
				}
		  },
		  shareImg(){
			let params = {
				token: getToken()
			}
			this.$api.home.getQRcode(params).then(
				(res) => {
					if (res.code == '200') {
						this.shareImage=res.data.accessPath  
					  }
				}
			)
			
		  },
		  // Generate QR code
		  creatQrCode() {
		    const qrContainer = document.getElementById('qrCodeUrl')
		    qrContainer.innerHTML = ''
		    new QRCode(qrContainer, {
		      text: this.shareUrl, // Content of QR code
		      width: 70,
		      height: 70,
		      colorDark: '#000000',
		      colorLight: '#ffffff',
		      correctLevel: QRCode.CorrectLevel.H,
		      whiteMargin: true
		    })
		    const that = this
		    // const dom = document.getElementById('sharebox')
			/*
			html2Canvas(document.querySelector('#sharebox')).then(function (canvas) {
				canvas.toBlob(function(blob) {
				    that.dataBlob = blob
				    that.saveBtn = true
				  }, 'image/jpeg');
				that.saveBtn = true
			})*/
			//console.log(document.querySelector('#sharebox'))
			html2Canvas(document.querySelector('#sharebox')).then(function (canvas) {
			  that.dataBlob = canvas.toDataURL('image/jpeg', 1.0)
			  that.saveBtn = true
			})
		  },
		  // Save Picture
		  saveImage() {
			//console.log(this.dataBlob);
		    const a = document.createElement('a')
			//a.href = URL.createObjectURL(this.dataBlob)
			a.href=this.dataBlob
		    a.download = new Date().getTime() + '.jpg'
		    a.click()
		  },
		  // copy
		  onCopy() {
		    this.$message({ message: this.$t('user.copySuc'), type: 'success' })
		  },
			nameFormat(item) {
				if (!item) return '';
				let str = item;
				if(str.length == 2){
					str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*')
				}else if(str.length == 3){
					str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g , '$1*$3')
				}else if(str.length == 4){
					str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,2})([^\x00-\xff])/g , '$1**$3')
				}else if(str.length > 4){
					str = str.toString().replace(/^([^\x00-\xff])([^\x00-\xff]{0,3})([^\x00-\xff])/g , '$1***$3')
				}else{}
				return str;
			}
		},
		mounted(){
			if(cookie.get('lang')=='EN' || cookie.get('lang')==undefined){
				this.ZH=false;
			}else{
				this.ZH=true;
			}
			this.miningInfo();
		}
}
</script>

<style lang="scss" scoped>
.user {
	display: inline-block;
	height: 101vh;
	background-color: #f00;
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	min-height: 100%;
	background:#fff url(@/static/images/team/teambg.png) no-repeat;
 	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		.arrowLeft{
			display: inline-block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 36rpx/60rpx PingFangSC;
			color:#FFF;
		}
		.share{
			display: inline-block;
			background:url('@/static/images/team/set_share.png') no-repeat;
			margin-left: 12rpx;
			width:48rpx;
			height:48rpx;
			background-size:100%;
		}
		
	}
	.userInfor{
		margin-top:60rpx;
		overflow: hidden;
		width:670rpx;
		height:334rpx;
		background:rgba(255,255,255,0.3) url('@/static/images/team/rectangle.png') no-repeat;
		background-size:100%;
		border-radius:40rpx;
		dt{
			width:160rpx;
			margin: 10px auto 0 auto;
			font: 500 32rpx/60rpx PingFangSC;
		}
		.userImg{
			width:160rpx;
			height:160rpx;
			background-size:100%;
		}
		dd{
			font:500 32rpx/40rpx PingFangSC;
			color:#fff;
			text-align: center;
		}
	}
	.question{
		display: inline-block;
		background:url('@/static/images/team/tip.png') no-repeat;
		margin-left: 12rpx;
		width:34rpx;
		height:36rpx;
		background-size:100%;
		vertical-align: bottom;
	}
	.el-tooltip__popper.is-light {
	    background: #FFF;
	    border:0px solid #fff !important;
		font-size:24rpx;
	}
	.referralCode{
		width:100%;
		height: 194rpx;
		margin-top:100rpx;
		font:400 24rpx/40rpx PingFangSC;
		padding:0;
		box-sizing: border-box;
		// display: flex;
		// justify-content: space-around;
		text-align: center;
		dl{
			position: relative;
			float:left;
			width:50%;
			dd:after{
				position: absolute;
				content: '';
				border-right:rgba(241, 241, 241,0.2) solid 1px;
				height:100rpx;
				top:46rpx;
				right:0rpx;
			}
		}
		dl::after{
			position: absolute;
			
		}
		
		dt{
			font:900 80rpx/120rpx Gilroy-HeavyItalic !important;
			color: #6D50DF;
			transform: skewX(350deg);
			height:120rpx;
		}
		dd{
			font:100 24rpx/40rpx PingFangSC !important;
			color: #333;
		}
	}
	.unmannedTip{
		font-weight: 400;
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin:0rpx auto;
	}
	.unmanned{
		display:block;
		background:url('@/static/images/team/unmanned.png') no-repeat;
		margin:10rpx auto;
		width:500rpx;
		height:444rpx;
		background-size:100%;
		
	}
	.teamIcon{
		display:inline-block;
		background:url('@/static/images/team/team.png') no-repeat;
		margin:10rpx 15rpx 10rpx 0;
		width:36rpx;
		height:36rpx;
		background-size:100%;
		vertical-align: middle;
		
	}
	.teamList{
		dl{
			width: 100%;
			height:100rpx;
			border-bottom: 1px solid #F1F1F1;
			padding:48rpx 0;
			dt{
				float: left;
				width:100rpx;
				img{
					background-size: 100%;
					width:100rpx;
					height:100rpx;
				}
			}
			dd{
				float: left;
				width:60%;
				color:#666;
				font-size:28rpx;
				margin-top: 10rpx;
				margin-left:24rpx;
				strong{
					display:block;
					color: #333;
					font-weight: bold;
				}
				
			}
			dd:last-child{
				width:16%;
				float: right;
				text-align: right;
			}
			dd:last-child strong{
				font-size: 40rpx;
				font-weight: bold;
				color: #6D50DF ;
				display: block;
			}
			dd:last-child span{
				font-size:24rpx;
				line-height:28rpx;
				color: #666666;
			}
		}
		
	}
	.sharedialog {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		z-index: 999;
		.close {
			position: absolute;
			top: 140rpx;
			right: 10%;
			font-size: 42rpx;
			color: #fff;
		}
		.sharebox {
			display: inline-block;
			position: relative;
			width: 80%;
			margin: 200rpx 10% 0;
			img {
				float: left;
			}
			.tips {
				position: absolute;
				right: 12px;
				bottom: 15px;
				font-weight: 300;
				font-size: 12px;
				font-family: 'Arial,Helvetica Neue,Helvetica,sans-serif';
				color: #fff;
			}
			.qrcode {
				position: absolute;
				z-index: 2023;
				bottom: 40px;
				right: 12px;
				width: 90px;
				height: 90px;
				display: inline-block;
				border: 3px solid #fff;
			}
			.qrcode img {
				width: 90px;
				height: 90px;
				background-color: #fff;
				padding: 0;
				box-sizing: border-box;
			}
			.imgbox {
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				opacity: 0;
			}
		}
		/deep/ .sharebox-btn {
			position: absolute;
			display: flex;
			text-align: center;
			width: 80%;
			margin: 30rpx 10%;
			.btn {
				flex: 1;
			}
		}
	}
	.shareBox{
		width:100%;
		height:100%;
		min-height:1334rpx;
		box-sizing: border-box;
		text-align: center;
		margin: 0 auto;
		background: url(@/static/images/shareBG-e.png) no-repeat;
		background-size: 100%;
		img{
			width:650rpx;
			height:482rpx;
			position: relative;
			z-index: -1;
		}
		span{
			display: block;
			background:#000;
			width: 148rpx;
			height:148rpx;
			position: absolute;
			top: 874rpx;
			left: 302rpx;
		}
	}
	
	.shareBox-H{
		width:100%;
		height:100%;
		min-height:1334rpx;
		box-sizing: border-box;
		text-align: center;
		margin: 0 auto;
		background: url(@/static/images/shareBG-h.png) no-repeat;
		background-size: 100%;
		img{
			width:650rpx;
			height:482rpx;
			position: relative;
			z-index: -1;
		}
		span{
			display: block;
			background:#000;
			width: 148rpx;
			height:148rpx;
			position: absolute;
			top: 874rpx;
			left: 302rpx;
		}
	}
	.sharebox-btn{
		position: relative;
		top: -114rpx;
		left: 90rpx;
		.btn{
			width:260rpx;
			height:92rpx;
			background: #6D50DF;
			border-radius:46rpx;
			font:500 32rpx/20px PingFangSC;
		}
	}
}
</style>
